<template>
    <section class="form-container">
        <el-form size="mini" class="form-filter">
            <el-form-item>
                <el-button @click="showUpdate({})" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="dataList"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="seatName" label="座位名称"/>
                <el-table-column prop="row" label="第几排"/>
                <el-table-column prop="col" label="第几列"/>
                <el-table-column prop="saleTicketType" label="售票类型">
                    <template #default="scope">
                        <el-tag :type="scope.row.saleTicketTypeStyle">
                            {{ scope.row.saleTicketTypeName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="座位状态" width="80px">
                    <template #default="scope">
                        <el-tag :type="scope.row.statusStyle">
                            {{ scope.row.statusName }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isDriverSeat" label="司机位">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isDriverSeat">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isNearWindow" label="靠窗">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isNearWindow">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="isSafetyDoorFront" label="安全门前排">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isSafetyDoorFront">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isSafetyDoorBehind" label="安全门后排">
                    <template #default="scope">
                        <el-tag v-if="scope.row.isSafetyDoorBehind">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" width="150">
                    <template #default="scope">
                        <el-button size="mini" @click="showUpdate(scope.row)">编辑
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.id)">
                            <el-button slot="reference" size="mini" style="margin-left:10px;">删除
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <Update ref="updateRef" @refresh="getList()"/>
        </div>
    </section>
</template>
<script>
import {VehicleTypeSeatApi} from '@/api/user/VehicleTypeSeatApi'
import Update from './Update.vue'

export default {
    name: 'VehicleTypeSeat',
    components: {
        Update
    },
    data() {
        return {
            dataList:[],
            coordinate: {column: -1, row: -1},
            loading: false,
            vehicleTypeId: 0,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            },

            currentUrl:''
        }
    },
    created() {
        this.refresh()
    },

    watch:{
        $route(to,from){
            if(to.name=='VehicleTypeSeat' && this.currentUrl != location.href){
                this.refresh()
            }
        }
    },
    methods: {
        refresh(){
            this.vehicleTypeId = this.$router.currentRoute.query.vehicleTypeId
            this.getList()
            this.currentUrl = location.href
        },
        // 获取用户列表
        getList() {
            this.loading = true
            VehicleTypeSeatApi.getList(this.vehicleTypeId).then((response) => {
                this.dataList = response
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        },

        // 删除数据
        handleDelete(id) {
            VehicleTypeSeatApi.delete(id).then((response) => {
                this.getList()
            })
        },

        showUpdate(data) {
            if (JSON.stringify(data) === '{}') {
                data.vehicleTypeId = this.vehicleTypeId
            }
            this.$refs['updateRef'].showUpdate(data)
        }
    }
}

</script>

<style lang="scss" scoped></style>
